<template>
  <div class="container">
    <!-- 一级标题 -->
    <div class="shibie">
      <div class="shibie_title">技术：数据资产识别</div>
      <!-- <div class="shibie_content">
        在识别战术领域，主要聚焦在数据资产发现和处理，本报告重点对数据资源发现，数据资产识别，数据资产处理（分析），数据分类分级，数据资产打标作出描述。
      </div> -->
    </div>
    <!-- 二级标题 -->
    <div class="shibie2">
      <el-table :data="tableData" border style="width: 95%; margin-left: 30px">
        <el-table-column prop="title" label="标题" width="100">
        </el-table-column>
        <el-table-column prop="basis" label="基本概念" width="620">
        </el-table-column>
        <el-table-column prop="main" label="主要实现"> </el-table-column>
      </el-table>
    </div>
    <!-- 注解 -->
    <div class="shibie_explain">
      注释#5:根据 DMBOK1.0, 2014，数据资产(DataAsset)是指由企业拥有或企业控制的，能够为企业带来未来经济利益的，以物理或电子的方式记录的数据资源，如文件资料、电子数据等。在企业中，并非所有的数据都构成数据资产，数据资产是能够为企业产生价值的数据资源。
      <br />
      在非特定场景下，数据资源发现、数据资产识别、数据资产处理（分析）会由一体化产品或方案实现。
    </div>
    <!-- 扩展技术 -->
    <div class="technical-expansion">
      <h2 style="padding: 10px; margin: 20px">扩展技术</h2>
      <div style="margin-top: 20px">
        <span
          type="primary"
          style="margin-left: 45px; color: #429ccd; cursor: pointer"
          @click="drawer1 = true"
        >
          关键词提取
        </span>
        <el-drawer v-model="drawer1" title="关键词提取" :with-header="false">
          <div style="text-indent: 2em; padding-bottom: 10px">
            随着 NLP、OCR、ASR 等技术不断成熟，针对自然语言样本数据进行关键词提取得到进一步推广。关键词提取在智能文档审阅、机器人流程自动化等领域已经有了较成功应用，特别地，把结合 AI算法、机器学习的关键词提取技术在数据资产识别场景下是较为成熟的应用技术。
          </div>
          <h5>基本概念</h5>
          <span style="margin-left: 30px">
            关键词提取指运用人工确认、自动化算法等，自动抽取反映文本主题的词或者短语的过程、技术和方法。在数据安全领域，关键词可以用来识别和标记有价值的数据资产。
          </span>
          <br />
          <h5 style="margin: 10px 0">主要实现</h5>
          <span style="margin-left: 30px">
            关键词提取一般会集成于推荐系统或搜索系统，提取方法分为有监督7、半监督和无监督。其中，无监督关键词抽取算法可以分为三大类，基于统计特征的关键词抽取、基于词图模型的关键词抽取和基于主题模型的关键词抽取。
            <br />
            <br />
            <b> # 基于统计特征的关键词提取算法 </b>
            <br />
            <div style="text-indent: 2em;"
              >利用文档中词语的统计信息抽取文档的关键词。通常将文本经过预处理得到候选词语的集合，然后采用特征值量化的方式从候选集合中得到关键词。基于统计特征的关键词抽取方法的关键是采用什么样的特征值量化指标的方式，常用的有三类：
              <br />
              1) 基于词权重的特征量化
              <br />
              2) 基于词的文档位置的特征量化
              <br />
              3) 基于词的关联信息的特征量化
            </div>
            <br />
            <b> # 基于词图模型的关键词抽取算法 </b>
            <br />
            <div style="text-indent: 2em;"
              >构建文档的语言网络图，对语言进行网络图分析，图上确认的具有重要作用的词或者短语即为关键词。根据词的链接方式不同，语言网络的主要形式分为四种：
              <br />
              1) 共现网络图、
              <br />
              2) 语法网络图、
              <br />
              3) 语义网络图
            </div>
            <br />
            <b> # 基于主题模型的关键词抽取 </b>
            <br />
            <div style="text-indent: 2em"
              >利用的是主题模型中关于主题的分布的性质进行关键词提取。算法的关键在
              于主题模型的构建。
            </div>
          </span>

          <div style="margin-top: 60px">
            注释#7:有监督的文本关键词提取算法需要高昂的人工成本，本文重点关注无监督关键词提取算法。
          </div>
        </el-drawer>
      </div>
      <div style="margin-top: 20px">
        <span
          type="primary"
          style="margin-left: 45px; color: #429ccd; cursor: pointer"
          @click="drawer2 = true"
        >
          正则表达式
        </span>
        <el-drawer
          class="drawer"
          v-model="drawer2"
          title="正则表达式"
          :with-header="false"
        >
          <div style="text-indent: 2em">
            在可控的数据资源范围内，识别未知数据资产或者检测发现流量中动态数
            据，利用正则表达式是较高效较精准的识别方法。
          </div>
          <br />
          <h5>基本概念</h5>
          <span style="margin-left: 30px">
            正则表达式(regular
            expression)指利用字符串匹配的模式（pattern），来检
            查一个字符串是否含有某种子串、将匹配的子串替换或者从某个串中取出符合某
            个条件的子串等。在数据安全领域，可以通过正则表达式搜索拥有特定属性的数
            据资产。
          </span>
          <br />
          <span style="margin-left: 30px">
            构造正则表达式的方法和创建数学表达式的方法一样。也就是用多种元字符
            与运算符可以将小的表达式结合在一起来创建更大的表达式。正则表达式的组件
            可以是单个的字符、字符集合、字符范围、字符间的选择或者所有这些组件的任
            意组合。
          </span>

          <br />
          <h5 style="margin: 10px 0">主要实现</h5>
          <span style="margin-left: 30px">
            正则表达式是由普通字符（例如字符 a 到
            z）以及特殊字符（称为"元字符"）
            组成的文字模式。模式描述在搜索文本时要匹配的一个或多个字符串。正则表达
            式作为一个模板，将某个字符模式与所搜索的字符串进行匹配。
          </span>
          <br />
          <span style="margin-left: 30px">
            正则表达式的主要实现方式为采用多种元字符与运算符，将小的表达式结
            合，创建更大的表达式。正则表达式的组件可以是单个字符、字符集合、字符范
            围、字符间的选择，也可以是这些组件的任意组合。
          </span>
          <br />
          <span style="margin-left: 30px"> 通常，正则表达式的语法为： </span>
          <br />
          <div style="font-weight: bold;margin-top: 10px;height: 0;"># 普通字符</div>
          <br />
          <span style="margin-left: 30px">
            包括没有显示指定为元字符的所有可打印和不可打印字符。这包括所有大写
            和小写字母、所有数字、所有标点符号和一些其他符号。
          </span>
          <br />
          <div style="font-weight: bold;margin-top: 10px;height: 0;"># 非打印字符</div>
          <br />
          <span style="margin-left: 30px">
            非打印字符也可以是正则表达式的组成部分，如\cx\f\n 等。</span
          >
          <br />
          <div style="font-weight: bold;margin-top: 10px;height: 0;"># 特殊字符</div>
          <br />
          <span style="margin-left: 30px"
            >一些有特殊含义的字符，如“runoo*b”中的“*”。其中，许多元字符要求
            在试图匹配它们时特别对待。</span
          >
          <br />
          <div style="font-weight: bold;margin-top: 10px;height: 0;"># 限定符</div>
          <br />
          <span style="margin-left: 30px"
            >用来指定正则表达式的一个给定组件必须要出现多少次才能满足匹配。有*或+或?或{n}或{n,}或{n,m}共6种。</span
          >
          <br />
          <div style="font-weight: bold;margin-top: 10px;height: 0;"># 定位符</div>
          <br />
          <span style="margin-left: 30px"
            >可以将正则表达式固定到行首或行尾，还可以创建出现在一个单词内、在一
            个单词的开头或者一个单词的结尾的正则表达式。</span
          >
          <br />
          <div style="font-weight: bold;margin-top: 10px;height: 0;"># 选择</div>
          <br />
          <span style="margin-left: 30px"
            >用圆括号 () 将所有选择项括起来，相邻的选择项之间用 | 分隔。()
            表示捕 获分组，()
            会把每个分组里的匹配的值保存起来，多个匹配值可以通过数字 n 来查看(n
            是一个数字，表示第 n 个捕获组的内容)。
          </span>
          <br />
          <div style="font-weight: bold;margin-top: 10px;height: 0;"># 反向引用</div>
          <br />
          <span style="margin-left: 30px; white-space: pre-wrap">
            对一个正则表达式模式或部分模式两边添加圆括号将导致相关匹配存储到
            一个临时缓冲区中，所捕获的每个子匹配都按照在正则表达式模式中从左到右出
            现的顺序存储。缓冲区编号从 1 开始，最多可存储 99
            个捕获的子表达式。每个 缓冲区都可以使用访问，其中 n
            为一个标识特定缓冲区的一位或两位十进制 数。
            <br />
            常见车牌正则表达式：
            /^([京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼
            使领
            <br />
            A-Z]{1}[a-zA-Z](([DF]((?![IO])[a-zA-Z0-9](?![IO]))[0-9]{4})|([0-9]{5}[DF]))|[京
            津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领
            <br />
            A-Z]{1}[A-Z]{1}[A-Z0-9]{4}[A-Z0-9 挂学警港澳]{1})$/
            常用居民身份证(18 位)正则表达式：
            <br />
            /^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\
            d{3}[0-9Xx]$ /
          </span>
          <br />

          <div style="margin-top: 60px">
            注释#8:正则表达式 -
            语法，https://www.runoob.com/regexp/regexp-syntax.html
          </div>
        </el-drawer>
      </div>
      <div style="margin-top: 20px">
        <span
          type="primary"
          style="margin-left: 45px; color: #429ccd; cursor: pointer"
          @click="drawer3 = true"
        >
          基于文件属性识别
        </span>
        <el-drawer
          v-model="drawer3"
          title="基于文件属性识别"
          :with-header="false"
        >
          <div style="text-indent: 2em; white-space: pre-line">
            据 IDC 研究表明，到 2025 年，全球数据量将会从 2016 年的 16 ZB 上升至
            163ZB。著名研究机构 Garter 也表示，全球信息量正在以
            59%以上的年增长率快 速增长，其中
            80%都是以文件形式存在的非结构化和半结构化数据；在半结构化
            中，日志文件、机器数据等又占比 90%。
            <br />
            利用日志文件、机器数据的文件属性进行粗较度数据资产识别是数据资产识
            别重要手段之一。
          </div>
          <br />
          <h5>基本概念</h5>
          <span style="margin-left: 30px">
            文件属性9识别指基于文件属性对文件进行识别和分类。文件属性识别在数据
            安全领域，可以用来对数据资产进行识别和分类，从而更高效处理和利用数据资
            产。
          </span>
          <br />
          <h5 style="margin: 10px 0">主要实现</h5>
          <span style="margin-left: 30px"
            >文件属性识别的主要实现方式包括聚类识别、文件相似度、文件精确指纹识
            别、文件 DNA 识别、支持多属性条件过滤等技术。</span
          >
          <br />
          <div style="font-weight: bold;margin-top: 10px;height: 0;"># 聚类识别</div>
          <br />
          <span style="margin-left: 30px"
            >根据文件业务内容，基于大量行业文件进行机器学习，智能识别分类文件，
            如财务文件聚类、金融行业文件聚类等。</span
          >
          <br />
          <div style="font-weight: bold;margin-top: 10px;height: 0;"># 文件相似度</div>
          <br />
          <span style="margin-left: 30px">
            根据文件内容相似度比例，找到与此文件相关联的文件。
          </span>
          <br />
          <div style="font-weight: bold;margin-top: 10px;height: 0;"># 文件精确指纹识别</div>
          <br />
          <span style="margin-left: 30px">
            根据提取计算的文件指纹，准确识别。
          </span>
          <br />
          <div style="font-weight: bold;margin-top: 10px;height: 0;"># 文件 DNA 识别</div>
          <br />
          <span style="margin-left: 30px"
            >根据文件的内容特征，发现由此文件编辑、修改后保存的不同版本的文件。</span
          >
          <br />
          <div style="font-weight: bold;margin-top: 10px;height: 0;"># 支持多属性条件过滤</div>
          <br />
          <span style="margin-left: 30px"
            >支持匹配次数、文件大小、优先级、文件类型等过滤。</span
          >
          <div style="margin-top: 60px">
            注释#9:文件属性指为了区分不同类型的文件，而定义的文件的某种独特性质。常见的文件属性分为系统属性、
            隐藏属性、只读属性和归档属性。
          </div>
        </el-drawer>
      </div>
    </div>
    <!-- 评论区 -->
    <div class="comments-section">
      <h3>评论区</h3>
      <div v-for="item in comments" :key="item.id" class="comment-item">
        <div>
          <strong>{{ item.username }}:</strong> <span>{{ item.content }}</span>
        </div>
        <span
          style="color: red; cursor: pointer"
          v-if="item.username === commentForm.username"
          @click="del(item.id)"
          >删除</span
        >
      </div>
      <div>
        <el-input
          class="comment-input"
          type="textarea"
          v-model="commentForm.content"
          placeholder="请输入评论内容"
        ></el-input>
      </div>
      <el-button class="comment-button" type="primary" @click="comment"
        >评论</el-button
      >

      <el-message
        v-if="errorMessage"
        :type="'error'"
        :message="errorMessage"
      ></el-message>
    </div>
  </div>
</template>

<script>
import request from "@/utils/request.js";
import { ref } from "vue";
const drawer = ref(false);

export default {
  data() {
    return {
      tableData: [
        {
          title: "数据资源发现",
          content:
            "数据资源的资产属性，且一般归类为无形资产\n" +
            "[21]。由于数据资产\n" +
            "5属性，在开\n" +
            "展数据安全工作时，首先对数据资产识别是常见技术手段之一。\n" +
            "数据资产识别非正式定义为：结合组织的行业属性，利用文本识别（音频转\n" +
            "义）、图像识别（视频分帧）等技术，通过关键字匹配，正则表达式匹配以及其\n" +
            "它自动化识别技术，对数据资源信息、构成等进行资产属性挖掘。数据资产识别一般为数据资源发现后置动作，一般为数据资产处理、数据分\n" +
            "类分级前置动作\n" +
            "6。",
          basis:
            "数据资产，是指拥有数据权属（勘探权、使用权、所有权）、有价值、可计\n" +
            "量、可读取的网络空间中的数据集。",
          main:
            "数据资产识别的主要实现方式为利用自动化技术手段对企业数据进行筛选\n" +
            "与分析，找出符合数据资产定义的数据集。数字资产的识别技术主要包含关键字、\n" +
            "正则表达式、基于文件属性识别、精准数据比对、指纹识别技术和支持向量网络\n" +
            "等。",
        },
        // {
        //   title: "数据资产识别",
        //   basis:
        //     "数据资产，是指拥有数据权属（勘探权、使用权、所有权）、有价值、可计量、可读取的网络空间中的数据集。",
        //   main: "数据资产识别的主要实现方式为利用自动化技术手段对企业数据进行筛选与分析，找出符合数据资产定义的数据集。数字资产的识别技术主要包含关键字、正则表达式、基于文件属性识别、精准数据比对、指纹识别技术和支持向量网络等。",
        // },
        // {
        //   title: "数据资产处理（分析）",
        //   basis:
        //     "数据资产处理（分析）指在数据清洗的基础上，针对已采集和识别的重要数据资产和个人信息进行合规和安全处理。",
        //   main: "通常，数据资产处理（分析）要首先对数据内容进行识别，然后再进行安全性分析、合规性分析、重要性（敏感性）分析等。",
        // },
        // {
        //   title: "数据分类分级",
        //   basis:
        //     "数据分类分级需要分两个步骤来开展。数据分类指根据组织数据的属性或特征，将其按照一定的原则和方法进行区分和分类，并建立起一定的分类体系和排列顺序，以便更好地管理和使用组织数据的过程。数据分级指按照一定的分级原则对分类后的数据进行定级，从而为数据的开放和共享安全策略提供支撑。",
        //   main: "通常，数据资产处理（分析）要首先对数据内容进行识别，然后再进行安全性分析、合规性分析、重要性（敏感性）分析等。",
        // },
        // {
        //   title: "数据资产打标",
        //   basis:
        //     "数据资产打标指在生产过程中，依据国家相关规定或企业自身管理需求，在产品上通过各种技术进行文字、图片等标识，产品并不局限于实体。",
        //   main: "数据资产打标的主要实现方式包括：基于关键字的敏感数据打标：通过字段名称，注释信息；基于正则的敏感数据打标：通过样本数据；基于机器学习的敏感数据打标：整个表中所有字段名，样本数据，与其他表的相似度进行训练；对账号字段打标等。",
        // },
      ],
      comments: [],
      pageId: 3,
      commentForm: {
        content: "",
        username: "", // 用户名会在 mounted 生命周期钩子中生成
        userId: "", // 用户 ID 会在 mounted 生命周期钩子中生成
      },
      errorMessage: "",
      drawer1: false,
      drawer2: false,
      drawer3: false,
    };
  },
  methods: {
    generateUserId() {
      // 生成唯一用户ID，例如使用随机数或UUID
      return "user_" + Math.random().toString(36).substr(2, 9);
    },
    generateUsername() {
      // 生成自动用户名，例如基于时间戳或随机字符串
      return "User_" + Math.random().toString(36).substr(2, 5);
    },
    del(commentId) {
      // 获取要删除的评论
      const comment = this.comments.find((c) => c.id === commentId);

      if (comment) {
        // 只允许删除自己评论
        if (comment.username === this.commentForm.username) {
          request
            .delete(`/comments/${commentId}`)
            .then(() => {
              this.$message.success("评论删除成功");
              this.load(); // 重新加载评论列表
            })
            .catch((error) => {
              console.error("删除评论失败:", error);
              this.$message.error("删除评论失败");
            });
        } else {
          this.$message.error("您没有权限删除此评论");
        }
      } else {
        this.$message.error("评论未找到");
      }
    },
    load() {
      request
        .get("/comments/" + this.pageId)
        .then((res) => {
          this.comments = res.data;
        })
        .catch((error) => {
          console.error("加载评论失败:", error);
        });
    },
    comment() {
      this.errorMessage = "";
      if (!this.commentForm.content.trim()) {
        this.errorMessage = "评论不能为空";
        return;
      }
      // 使用自动生成的用户名
      request
        .post("/comments/" + this.pageId, {
          content: this.commentForm.content,
          username: this.commentForm.username,
          userId: this.commentForm.userId,
        })
        .then(() => {
          this.$message.success("评论成功");
          this.commentForm.content = "";
          this.load();
        })
        .catch((error) => {
          console.error("提交评论失败:", error);
          this.$message.error("提交评论失败");
        });
    },
  },
  mounted() {
    this.commentForm.username = this.generateUsername(); // 在 mounted 生命周期钩子中生成用户名
    this.commentForm.userId = this.generateUserId(); // 在 mounted 生命周期钩子中生成用户 ID
    this.load();
  },
};
</script>

<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  .shibie {
    width: 100%;
    padding: 30px;
    .shibie_title {
      font-size: 36px;
      margin: 0 0 10px 0;
    }
  }
  .shibie_explain {
    margin: 20px 0 0 30px;
  }
  .comments-section {
    padding: 20px;
    height: 400px;
    margin-left: 20px;
    // 评论列表样式
    .comment-item {
      padding: 10px;
      margin-left: 10px;
    }
    .comment-input {
      margin: 15px 0;
    }
    .comment-button {
      width: 80px;
      height: 40px;
      font-size: 18px;
    }
  }
}
</style>;
